<template>
  <el-dropdown trigger="click" class="fonBox">
    <img src="@/assets/imgs/fotnsiz.png" class="img" width="20">
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :icon="CaretRight" @click="changSize(ind)" :disabled="index==ind" v-for="(item,ind) in selectList" :key="ind">{{item.name}}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { CaretRight } from '@element-plus/icons-vue';
export default {
  setup() {
    return {
      CaretRight
    }
  },
  data() {
    return {
      selectList: [
        { name: "超大" },
        { name: "默认" },
        { name: "较小" }
      ],
      index: 1
    }
  },
  methods: {
    //改变组件大小
    changSize(ind) {
      this.index = ind
      this.$emit('changSize', ind)
    }
  }
}
</script>

<style lang="less" scoped>
.fonBox {
  vertical-align: middle;
  cursor: pointer;
}

</style>